<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
    <title>External JavaScript</title>
    <meta name="order" content="12" />
  </head>
  <body>
    <h2>External JavaScript</h2>
    <p>A shape may contain a complex and long JavaScript code for
      calculating behaviors value, moreover, other shapes may also contains this
      exactly the same code. So it takes time to review and modify
      shapes. To be convenient, these code should be brought out of
      shapes and put into <code>&lt;Script&gt;&lt;/Script&gt;</code> tag that at the collection level.</p>
<pre name="code" class="xml"><![CDATA[
<Shapes>
  ...  
  <Script></Script> <!-- Share code goes here -->
  ... 
  <Shape></Shape>
  <Shape></Shape>
</Shapes>
]]>
</pre>
    <p>Example:</p>
<pre name="code" class="xml"><![CDATA[
<Script>
  collection.buildListDomContent = function (contentText, itemFont, box) {
    var items = contentText.value.split(/[\r\n]+/);
    var specs = [];
    for (var i = 0; i &gt; items.length; i ++) {
      var css = new CSS();
      var title = items[i];
      
      if (title.match(/\S/) != null) {
        var lineHeight = (i + 1) * (30 + itemFont.getPixelHeight());
        
        var css = new CSS();
        css.set("font-size",itemFont.size);
        css.set("font-family",itemFont.family);
        css.set("font-style",itemFont.style);
        css.set("font-weight",itemFont.weight);
        css.set("font-decor",itemFont.decor);
        css.set("fill", itemColor.toRGBString());
        
        specs.push({
            _name: "text",
            _uri: "http://www.w3.org/2000/svg",
            x: 10,
            y: lineHeight,
            _text : title,
            style: css
          },{
            _name: "path",
            _uri: "http://www.w3.org/2000/svg",
            d: "m 10,"+ (lineHeight+10) + " "+(box.w - 20)+",0" ,
            style : "stroke-width:1;stroke:#c9c9c9"
          });
      }
    }
    var frag = Dom.newDOMFragment(specs);
    
    return frag;
  };
</Script>
...
<Shape id="list" displayName="List" icon="Icons/list.png">
  <Properties>
    <PropertyGroup>
      <Property name="box" displayName="Box" type="Dimension">191,235</Property>
    </PropertyGroup>
    <PropertyGroup name="Item Text">
        ...
    </PropertyGroup>
  </Properties>
  <Behaviors>
    <For ref="content">
      <Bound>Bound.fromBox($box, 0, 54)</Bound>
      <Font>$itemFont</Font>
      <DomContent>collection.buildListDomContent($contentText, $itemFont, $box)</DomContent>
    </For>
  </Behaviors>
  <p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil"
             xmlns="http://www.w3.org/2000/svg">
    <g id="content" />
  </p:Content>
</Shape>
]]>
</pre>
    <p>As you may notice, in the context of JavaScript execution withtin a stencil behavior, the <code>collection</code> object is bound
    to the current collection that owns the stencil. The way share JavaScript code is used is that custom functions and attributes 
    are added in the collection-level script and re-used later in stencil's code.</p>
  </body>
</html>
